/**
 * 项目中可以复用的数据和逻辑方法
 */
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

/**
 *
 * @param {*} apiCallBack 页面中请求的方法 => 回调函数(进入可视区域)
 */
export function useObserve (apiCallBack) {
  // 1. 获取监控的元素 (组件)
  const target = ref(null)
  // 2. 执行监控
  /**
   * 1. useIntersectionObserver函数的返回值是个对象，对象中的stop方法可以停止监控
   * 2. useIntersectionObserver(
   * target:监控的dom对象或组件实例
   * callback:被监控对象进入可视区域执行的回调函数
   * options?:配置监控行为 => ?是ts语法，代表非必传
   * )
   *
   * 需求：当前组件进入可视区，发请求获取数据(只发一次)
   * 根据useIntersectionObserver监控函数的回调中的isIntersecting判断实现
   */
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // 参数1是个数组：解构出数组中对象的isIntersecting的值 => 用来判断元素是否进入可视区域
      console.log(isIntersecting ? '进入可视区域' : '离开可视区域')
      if (isIntersecting) {
        // 发请求
        // getNew()
        apiCallBack()
        // 发完，停止监控
        stop()
      }
    },
    {
      threshold: 0 // 说明：0-1区间 => 默认大于0 => 如果想一旦进入可视边界立马执行，就设置这个值为0
    }
  )
  // 返回监控元素的数据变量
  return { target }
}
